<template>
  <el-dialog
    v-model="dialogVisible"
    :title="`${createType == 'create' ? '添加' : '编辑'}账号`"
    width="40%"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
    draggable
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="60px"
      class="demo-ruleForm"
      :rules="rules"
      status-icon
    >
      <el-form-item label="账号" prop="account">
        <el-input v-model="ruleForm.account" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input
          v-model.trim="ruleForm.pwd"
          type="password"
          show-password
          placeholder="请输入密码（默认填入888888,可修改,便于测试）"
        />
      </el-form-item>
      <el-form-item label="菜单" prop="menu">
        <div class="tree">
          <RoleTree :ref="(el) => (roleTreeRef = el)" />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import RoleTree from './RoleTree.vue'
  import { createAccount } from '~/src/api/dms/home/homeCustomer'
  import { ArrayOneValue, StrSplit } from '~/src/utils/utils'

  /***
   * @var
   */
  const dialogVisible = ref(false)
  const ruleForm = ref<any>({
    account: '',
    pwd: '888888',
  })
  const roleTreeRef = ref()
  const ruleFormRef = ref()
  const proxy: any = getCurrentInstance()?.proxy
  const createType = ref('create')

  const rules = {
    account: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
    pwd: [
      { required: true, message: '密码不能为空', trigger: 'blur' },
      { min: 6, message: '密码长度不能低于六位', trigger: 'blur' },
    ],
  }

  /**
   * @method
   */

  const emit = defineEmits(['refreshPage'])

  const handleClose = () => {
    dialogVisible.value = false
  }

  const open = (type: string, row: any) => {
    createType.value = type
    dialogVisible.value = true
    ruleForm.value.account = ''

    // 编辑
    if (row) {
      const { account } = row
      ruleForm.value.account = account
      nextTick(() => {
        roleTreeRef.value.updateTree(row)
      })
      return
    }
    // 创建
    nextTick(() => {
      roleTreeRef.value.updateTree({ type })
    })
  }

  const handleConfirm = () => {
    ruleFormRef.value.validate((valid: any, fields: any) => {
      if (!valid) return
      const menu = roleTreeRef.value.selectRouerList()
      const authName = ArrayOneValue(menu, 'authName')

      createAccount({
        ...ruleForm.value,
        menu: authName?.toString(),
        button: 1,
        id: createType.value == 'create' ? false : true,
      }).then((res) => {
        proxy.$Message(
          `${createType.value == 'create' ? '新建' : '编辑'}成功`,
          'success'
        )
        handleClose()
        emit('refreshPage')
      })
    })
  }

  defineExpose({
    open,
  })
</script>
<style scoped>
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  .tree {
    width: 100%;
    height: 250px;
    padding: var(--el-padding);
    overflow-y: auto;
    border: 1px solid var(--el-border-color);
    border-radius: var(--el-border-radius-base);
  }
</style>
